<template>
    <div>
        <h2>门店列表</h2>
        <input type="button" value="添加" @click="goadd" ><br>
        门店名称：<input type="text" v-model="state.name" >
        电话号：<input type="text" v-model="state.phone" >
        <input type="button" value="查询" @click="getlist" >
        <table class="table table-bordered">
            <tr>
                <td>ID</td>
                <td>门店名称</td>
                <td>门店电话</td>
                <td>门店地址</td>
                <td>门店logo</td>
                <td>有效日期</td>
                <td>营业日期</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.sId }}</td>
                <td>{{ item.sName }}</td>
                <td>{{ item.sPhone }}</td>
                <td>{{ item.address }}</td>
                <td>
                    <img :src="item.pic" alt="" width="100" height="100" />
                </td>
                <td>{{ item.yxTime.substring(0, 10) }}</td>
                <td>{{ item.useTime.substring(0, 10) }}</td>
                <td>{{ item.sState==1?'显示':'隐藏' }}</td>
                <td> 
                     <input type="button" v-if="item.sState==1"  value="隐藏" @click="updstate(item.sId,item.sState)" >
                     <input type="button" v-else value="显示" @click="updstate(item.sId,item.sState)" >
                     <input type="button" value="删除" @click="del(item.sId)" >
                </td>
            </tr>
        </table>
        <div>
            <span>总条数{{ totalcount }}</span>
            <span>总页数{{ totalpage }}</span>
            <span>当前第{{ state.index }}/{{ totalpage }}</span>
            <input type="button" value="首页" @click="page('1')" >
            <input type="button" value="上一页" @click="page('2')" >
            <input type="button" value="下一页" @click="page('3')" >
            <input type="button" value="尾页" @click="page('4')" >
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

let router = useRouter()
let data: any = reactive({
    state: {
        name: '',
        phone: '',
        index: 1,
        size: 2
    },
    list: [],
    totalpage: 0,
    totalcount: 0
})
let { state, list, totalcount, totalpage } = toRefs(data)
onMounted(() => {
    getlist()
})
const page=(str:any)=>{
    switch(str){
        case"1":
        if(state.value.index==1){
            alert("已经是第一页了")
            return;
        }
        state.value.index=1;
        break;
        case"2":
        if(state.value.index==1){
            alert("已经是第一页了")
            return;
        }
        state.value.index--;
        break;
        case"3":
        if(state.value.index==totalpage.value){
            alert("已经是z最后一页了")
            return;
        }
        state.value.index++;
        break;
        case"4":
        if(state.value.index==totalpage.value){
            alert("已经是最后一页了")
            return;
        }
        state.value.index=totalpage.value;
        break;
    }
    getlist()
}


const getlist = () => {
    let obj = {
        name: state.value.name,
        phone: state.value.phone,
        index: state.value.index,
        size: state.value.size
    }
    axios({
        url: '/api/Store/GetStores',
        method: 'get',
        params: obj
    })
        .then(res => {
            console.log(res)
            list.value = res.data.data
            totalcount.value=res.data.totalcount
            totalpage.value=res.data.totalpage
        })
        .catch(err => {
            console.log(err)
        })
}

const updstate=(id:any,state:any)=>{
    if(state==1){
        state=0
    }
    else{
        state=1
    }
    let obj={
        id:id,
        state:state
    }
    axios({
        url:'/api/Store/updState',
        method:'post',
        params:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data.data==1){
            alert("修改成功")
         getlist()
        }
        else{
            alert("修改失败")
            return;
        }
    })
    .catch(err=>{
        console.log(err)
    })

}
const del=(id:any)=>{

    let obj={
        id:id,

    }
    axios({
        url:'/api/Store/DelStore',
        method:'post',
        params:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data.data==1){
            alert("删除成功")
         getlist()
        }
        else{
            alert("删除失败")
            return;
        }
    })
    .catch(err=>{
        console.log(err)
    })

}


const goadd=()=>{
    router.push('/sadd')
}
</script>

<style scoped></style>